import {GetStaff,UpdateStaff,AddStaff,GetRole} from '../../../api/index'
import {useState,useEffect} from  'react'
import { Col, Row ,Pagination} from 'antd';
import SearchStaff from './components/SearchStaff';
import EditStaff from './components/editStaff';
import dayjs from 'dayjs'
function StaffView() {
  // 是否是添加
  const [isAdd,setIsAdd] = useState(false);
  // 员工列表
  const [staffList,setStaffList] = useState([]);
  // 是否新手编辑弹框
  const [showEditStaff,setShowEditStaff] = useState(false);
  // 正在被编辑的员工数据
  const [staff,setStaff] = useState({});
  // 搜索条件
  const [searchParams,setSearchParams] =useState({id:'',name:'',tel:'',user_group:''})
  // 分页信息
  const [pagination,setPagination] = useState({current:1,size:4,total:0})
  // options 下拉菜单的选项 [{value:xxx,lable:yyy},{...}]
  const  [options,setOptions] = useState([]);
  // userGroup 用户组件 把id显示为名称的对象 {"1":"平台超级管理员","2":"店长","3":"订单核销xxx"}
  const [userGroup,setUserGroup] = useState({})
  // 获取用户组
  useEffect(()=>{
    GetRole({size:1000,order:'asc'})
    .then(res=>{
      // 拿到角色，并映射为需要的格式
      setOptions(res.data.data.map(item=>({value:item.id,label:item.name})))
      var group = {};
      res.data.data.forEach(item=>{
        group[item.id] = item.name;
      })
      setUserGroup(group)
    })
  },[])

  // 获取员工的方法
  const getStaff = ()=>{
    
    GetStaff({...searchParams,current:pagination.current,size:pagination.size})
    .then(res=>{
      // 更新员工列表数据
      setStaffList(res.data.data)
      // 更新分页信息
      setPagination(res.data.pagination)
    })
  }
    // 组件挂载完毕获取员工列表
  useEffect(()=>{
    getStaff();
  },[searchParams,pagination.current])
  const onChange = (page) => {
    // 当分页发生变化更新分页信息
    setPagination({...pagination,current:page});
  };
  const updateStaff = (data) =>{
    UpdateStaff(data)
    .then(res=>{
      if(res.data.code==0){
        alert("修改成功")
        // 成功后要获取员工一次
        getStaff();
      }
    })
  }
  const addStaff = data=>{
    setIsAdd(false);
    AddStaff(data)
    .then(res=>{
      if(res.data.code==0){
        alert("添加成功")
        getStaff();
      }
    })
  }
  const changeStaff = data=>{
    if(isAdd){
      addStaff(data);
    }else{
      updateStaff(data)
    }
  }
  return ( <div className='staff'>
   {/* 传递两个props给组件 */}
    <SearchStaff searchParams={searchParams} onChange={e=>setSearchParams({...e})}/>
    <button onClick={()=>{
      setIsAdd(true); //是否是添加设置为true
      setShowEditStaff(true); //打开弹框
      setStaff({
        name:'',
        tel:'',
        user_group:'',
        avatar:'',
        gender:''
      })
    }}>添加</button>
    <div className='staffList'>
    <Row>
          {
            staffList.map(item=><Col span={6} key={item.id}>
              <img width={100} src={item.avatar}/>
              <p>账号：{item.id}</p>
              {/* item.user_group 其实就是id：1,2,3---2333 */}
              <p>用户组：{userGroup[item.user_group]}</p>
              <p>用户名：{item.name}</p>
              <p>电话：{item.tel}</p>
              <p>登录时间：{dayjs(item.lastTime).format('YYYY/MM/DD HH:mm:ss')}</p>
              {/* 单击修改：显示弹框，设置正在被编辑的信息为item */}
              <button onClick={()=>{
                setShowEditStaff(true);
                setStaff(item)
              }}>修改</button>
            </Col>)
          }
        
    </Row>
    </div>
    <div className='pagination'>
    <Pagination 
    pageSize={pagination.size}
    current={pagination.current} onChange={onChange} total={pagination.total} />
    </div>
    {/* onCacel 当取消x被点击
        onOk 当确定的时候
        showEditStaff 是否显示弹框
        staff正在被编辑的节点
    */}
    <EditStaff 
    onCancel={()=>setShowEditStaff(false)} 
    onOk={(data)=>{
      setShowEditStaff(false)
      changeStaff(data);
    }} 
    showEditStaff={showEditStaff} 
    staff={staff}
    options={options}
    />
    
  </div> );
}

export default StaffView;

// 10:10分